<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pipfile.lock Dependency Parser</title>
  <style>
  * {
    box-sizing: border-box;
  }
  
  body {
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    color: #333;
  }
  
  h1 {
    margin-top: 0;
  }
  
  textarea {
    width: 100%;
    height: 300px;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    font-family: monospace;
  }
  
  button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
  }
  
  button:hover {
    background-color: #45a049;
  }
  
  pre {
    background-color: #f5f5f5;
    padding: 15px;
    border-radius: 4px;
    overflow-x: auto;
    white-space: pre-wrap;
    margin-top: 20px;
  }
  
  .error {
    color: #d9534f;
    margin-top: 10px;
  }
  
  .controls {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
  }
  </style>
</head>
<body>
  <h1>Pipfile.lock Dependency Parser</h1>
  <p>Paste your Pipfile.lock content below and click "Parse" to extract dependencies with their versions.</p>
  
  <textarea id="input" placeholder="Paste Pipfile.lock content here..."></textarea>
  
  <div class="controls">
    <button id="parseBtn">Parse Dependencies</button>
    <button id="copyPipfileBtn">Copy Pipfile Format</button>
    <button id="copyReqsBtn">Copy Requirements.txt</button>
    <button id="clearBtn">Clear All</button>
  </div>
  
  <div id="error" class="error"></div>
  
  <h2>Pipfile Format:</h2>
  <pre id="output"></pre>
  
  <h2>Requirements.txt Format:</h2>
  <pre id="reqsOutput"></pre>
  
  <script type="module">
// Parse the Pipfile.lock content and extract dependencies
function parsePipfileLock(content) {
  try {
    // Parse the JSON content
    const data = JSON.parse(content);
    let pipfileFormat = [];
    let reqsFormat = [];
    
    // Process dependencies from "default" section
    if (data.default) {
      for (const [name, info] of Object.entries(data.default)) {
        if (info.version) {
          // Extract version without the '==' prefix
          const version = info.version.replace(/^==/, '');
          pipfileFormat.push(`"${name}" = "==${version}"`);
          reqsFormat.push(`${name}==${version}`);
        }
      }
    }
    
    // Process dependencies from "develop" section if needed
    if (data.develop) {
      for (const [name, info] of Object.entries(data.develop)) {
        if (info.version) {
          const version = info.version.replace(/^==/, '');
          pipfileFormat.push(`"${name}" = "==${version}"`);
          reqsFormat.push(`${name}==${version}`);
        }
      }
    }
    
    return {
      pipfileFormat: pipfileFormat.join('\n'),
      reqsFormat: reqsFormat.join('\n')
    };
  } catch (error) {
    throw new Error(`Failed to parse Pipfile.lock: ${error.message}`);
  }
}

// Set up event handlers
document.getElementById('parseBtn').addEventListener('click', () => {
  const input = document.getElementById('input').value.trim();
  const pipfileOutputEl = document.getElementById('output');
  const reqsOutputEl = document.getElementById('reqsOutput');
  const errorEl = document.getElementById('error');
  
  errorEl.textContent = '';
  
  if (!input) {
    errorEl.textContent = 'Please paste Pipfile.lock content first.';
    return;
  }
  
  try {
    const result = parsePipfileLock(input);
    pipfileOutputEl.textContent = result.pipfileFormat;
    reqsOutputEl.textContent = result.reqsFormat;
  } catch (error) {
    errorEl.textContent = error.message;
  }
});

function copyToClipboard(text, successMessage) {
  if (!text) {
    document.getElementById('error').textContent = 'No content to copy.';
    return;
  }
  
  navigator.clipboard.writeText(text)
    .then(() => {
      const errorEl = document.getElementById('error');
      errorEl.textContent = successMessage || 'Output copied to clipboard!';
      errorEl.style.color = '#4CAF50';
      setTimeout(() => {
        errorEl.textContent = '';
        errorEl.style.color = '#d9534f';
      }, 2000);
    })
    .catch(err => {
      document.getElementById('error').textContent = 'Failed to copy: ' + err;
    });
}

document.getElementById('copyPipfileBtn').addEventListener('click', () => {
  const output = document.getElementById('output').textContent;
  copyToClipboard(output, 'Pipfile format copied to clipboard!');
});

document.getElementById('copyReqsBtn').addEventListener('click', () => {
  const output = document.getElementById('reqsOutput').textContent;
  copyToClipboard(output, 'Requirements.txt format copied to clipboard!');
});

document.getElementById('clearBtn').addEventListener('click', () => {
  document.getElementById('input').value = '';
  document.getElementById('output').textContent = '';
  document.getElementById('error').textContent = '';
});

// Initialize with example data from the textarea if present
const initialContent = document.getElementById('input').value.trim();
if (initialContent) {
  document.getElementById('parseBtn').click();
}
  </script>
</body>
</html>